import { h, ref, onMounted } from 'vue'
import {
  COLUMN_WIDTH_CONFIG,
  calculateTableWidth,
  DefaultTableWidth
} from '@/common/column-width-config'
import { InternalRowData, TableColumns } from '@/common/types'
import ShowOrEdit from '@/views/data-manage/common/show-or-edit'
import ShowOrSelect from '@/views/data-manage/common/show-or-select'
import { NButton, NSpace, SelectOption } from 'naive-ui'
import { DeleteOutlined } from '@vicons/antd'
import { ArrowDown, ArrowUp } from '@vicons/ionicons5'

export function useColumns(state: any, onCallback: Function) {
  const t = window.$t

  const dataTypeOptions: SelectOption[] = [
    { value: 'string', label: 'string' },
    { value: 'long', label: 'long' },
    { value: 'double', label: 'double' },
    { value: 'date', label: 'date' },
    { value: 'boolean', label: 'boolean' }
  ]

  const columnsRef = ref({
    columns: [] as TableColumns,
    tableWidth: DefaultTableWidth
  })

  const createColumns = () => {
    const columns = [
      {
        title: '#',
        key: 'index',
        align: 'center',
        render: (rowData: InternalRowData, rowIndex: number) => rowIndex + 1,
        ...COLUMN_WIDTH_CONFIG['index']
      },
      {
        title: t('taskManage.sourceColumnName'),
        key: 'sourceColumnName',
        width: 120,
        render: (rowData: any, unused: number) =>
          h(ShowOrSelect, {
            value: rowData.sourceColumnName,
            onUpdateValue(v) {
              rowData.sourceColumnName = v
            },
            options: state.sourceColumnOptions,
            tag: true
          })
      },
      {
        title: t('taskManage.sourceDataType'),
        key: 'sourceDataType',
        width: 120,
        render: (rowData: any, unused: number) =>
          h(ShowOrSelect, {
            value: rowData.sourceDataType,
            onUpdateValue(v) {
              rowData.sourceDataType = v
            },
            options: dataTypeOptions
          })
      },
      {
        title: t('taskManage.sourceDataFormat'),
        key: 'sourceDataFormat',
        width: 150,
        render: (rowData: any, unused: number) =>
          h(ShowOrEdit, {
            value: rowData.sourceDataFormat,
            onUpdateValue(v) {
              rowData.sourceDataFormat = v
            }
          })
      },
      {
        title: t('taskManage.targetColumnName'),
        key: 'targetColumnName',
        width: 120
      },
      {
        title: t('taskManage.defVal'),
        key: 'targetDefVal',
        width: 100,
        render: (rowData: any, unused: number) =>
          h(ShowOrEdit, {
            value: rowData.targetDefVal,
            onUpdateValue(v) {
              rowData.targetDefVal = v
            }
          })
      },
      {
        title: t('common.operation'),
        key: 'operation',
        align: 'center',
        ...COLUMN_WIDTH_CONFIG['operation'](2.5),
        render: (rowData: any, unused: number) => {
          return h(
            NSpace,
            { justify: 'center' },
            {
              default: () => [
                h(
                  NButton,
                  {
                    size: 'tiny',
                    strong: true,
                    secondary: true,
                    circle: true,
                    type: 'error',
                    title: window.$t('dataManage.removeField'),
                    onClick: () => void onCallback(unused, 'removeField')
                  },
                  {
                    icon: () => h(DeleteOutlined)
                  }
                ),
                h(
                  NButton,
                  {
                    size: 'tiny',
                    strong: true,
                    secondary: true,
                    circle: true,
                    type: 'info',
                    title: window.$t('dataManage.moveUp'),
                    onClick: () => void onCallback(unused, 'moveUpField')
                  },
                  {
                    icon: () => h(ArrowUp)
                  }
                ),
                h(
                  NButton,
                  {
                    size: 'tiny',
                    strong: true,
                    secondary: true,
                    circle: true,
                    type: 'info',
                    title: window.$t('dataManage.moveDown'),
                    onClick: () => void onCallback(unused, 'moveDownField')
                  },
                  {
                    icon: () => h(ArrowDown)
                  }
                )
              ]
            }
          )
        }
      }
    ] as TableColumns
    columnsRef.value = {
      columns,
      tableWidth: calculateTableWidth(columns)
    }
  }
  onMounted(() => {
    createColumns()
  })

  return {
    columnsRef
  }
}
